<template>
  <el-container class='home-container'>
    <!-- 主页头部 -->
    <el-header>
      <div>
        <el-row>
          <div style='width: 100px;'>
            <el-image :src="require('@/assets/dj.png')"></el-image>
          </div>
        </el-row>
      </div>

      <div style='width: 30%; padding-left: 30px;'>
        <el-menu
          class='topMenu'
          mode="horizontal"
          text-color="black"
          active-text-color="#34495e"
          @select="handleSelect">
          <el-menu-item index="100" ><a href="http://www.xyghr.com/recruit/web/toMain" target="_self">首页</a></el-menu-item>
          <el-menu-item index="101" ><a href="https://www.xyghr.com/web/toRecruit" target="_self">招聘求职</a></el-menu-item>
          <el-menu-item index="102" ><a href="https://www.xyghr.com/web/toNews" target="_self">通知公告</a></el-menu-item>
          <el-menu-item index="103"><a href="https://www.xyghr.com/web/toTrain" target="_self">培训专区</a></el-menu-item>
          <el-menu-item index="104"><a href="https://www.xyghr.com/web/toOrgServe" target="_self">企业服务</a></el-menu-item>
          <el-menu-item index="105"><a href="https://www.xyghr.com/web/toAboutUs" target="_self">关于我们</a></el-menu-item>
        </el-menu>
      </div>

      <div class='header-search' style='padding-left: 10%'>
        <el-input placeholder='按职位、公司搜索' v-model='keyword'>
          <el-button slot='append' icon='el-icon-search' @click='homeSearch'></el-button>
        </el-input>
      </div>

      <div style='padding-left: 200px; padding-right: 50px;'>
        <el-button type='text'>
          <el-row>
            <el-col :span='12'>
              <el-avatar :src=this.headimg></el-avatar>
            </el-col>
            <el-col :span='12' style='text-align: center; padding-top: 15px;'>
              <div style='padding-left: 10px; font-size: 20px; color: black'>
                {{ name }}
              </div>
            </el-col>
          </el-row>
        </el-button>
      </div>

      <div>
        <el-badge :max='99' class='item'>
          <el-button class='button-news' size='medium' type='text' @click='toNews'>消息</el-button>
        </el-badge>
      </div>

      <div>
        <el-button class='button-exit' type='text' @click='signOut'>退出</el-button>
      </div>
    </el-header>
    <el-container>
      <el-aside width='200px' style='margin-top: 1em; margin-left: 5em;'>
        <el-menu default-active='2' class='el-menu-vertical-demo' background-color='#545c64' text-color='#fff'
                 active-text-color='#ffd04b' :default-active='activeIndex' @select='handleSelect'>
          <el-menu-item :key='index' v-for='(item, index) in menuList2' :index='item.id.toString()'>
            {{ item.name }}
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view class='box' :key='$route.path + $route.query.t'></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { getUserInfo } from '../api/api'

export default {
  name: '',
  data() {
    return {
      keyword: '',
      img: require('../assets/dianjaing.jpg'),
      name: '',
      headimg:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      uid: '',
      activeIndex: '1',
      user: {},
      menuList2: [
        { name: '个人中心', id: 2 },
        { name: '我的简历', id: 3 },
        { name: '申请的职位', id: 4 },
        { name: '收藏关注', id: 5 },
        { name: '账号管理', id: 6 }
      ]
    }
  },
  created() {
    this.getUrlParam()
    this.getLocalHost()
  },
  mounted() {
    // let api3 = 'http://localhost:7070/news_type/all'
    // axios
    //   .get(api3)
    //   .then(res => {
    //     this.menuList2 = res.data.data
    //   })
    //   .catch(error => {
    //     console.log(error)
    //   })
    // this.getUserInfo(api3)
    // this.getLocalHost()
  },
  watch: {},
  methods: {

    //首页搜索
    homeSearch() {
      this.$router.push({
        path: '/home/positionRecommendation',
        query: {
          keyword: this.keyword,
          t: Date.now()
        }
      })
    },

    //获取跳转连接上的参数
    getUrlParam() {
      console.log('Home页面 获取跳转链接上的参数', this.$route.query)
      let userId = this.$route.query.ID
      if (userId !== undefined && userId !== '' && userId != null) {
        localStorage.setItem('UID', this.$route.query.ID)
      }

      const data = {
        UID: localStorage.getItem('UID')
      }
      getUserInfo(data).then(res => {
        this.name = res.data.NAME
        if (res.data.HEADIMG !== undefined && res.data.HEADIMG !== '' && res.data.HEADIMG !== null) {
          this.headimg = res.data.HEADIMG
        }
        console.log('homeres参数', res)
      })
    },

    //获取当前路由
    getLocalHost() {
      console.log('Home页面 获取当前路由', this.$route.path)
    },

    formatterTitle(t) {
      switch (t) {
        case 1:
          return 'index'
        case '22':
          return 'introduce'
        case '2':
          return 'index'
        case '3':
          return 'myResume'
        case '4':
          return 'xueShuJiaoLiu'
        case '5':
          return 'banShiZhiNan'
        case '6':
          return 'kePuFengCai'
        case '28':
          return 'xueXiaoShouYe'
        case '29':
          return 'telephone'
        case '100':
          return 'index'
        case '101':
          return 'index'
        case '102':
          return 'index'
        case '103':
          return 'index'
        case '104':
          return 'index'
        case '105':
          return 'index'
      }
    },

    handleSelect(key, keyPath) {
      this.keyword = ''
      if (key == '28') {
        window.open('https://www.pdsu.edu.cn/#')
      } else {

        if (this.$route.path !== ('/home/' + this.formatterTitle(key))) {
          this.$router.push({
            path: '/home/' + this.formatterTitle(key),
            query: {
              // title: this.formatterTitle(key),
              // id: key
              // ID:
            }
          })
        }
      }
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },

    jumpToHome() {
      window.open('http://www.xyghr.com/recruit/web/toMain', '_self')
    },

    signOut() {
      //清空本地浏览器缓存
      localStorage.removeItem('UID')
      window.open('http://www.xyghr.com/web/toMain?logout=1', '_self')
    },

    toNews() {
      this.$router.push({
        path: '/home/news',
        query: {
          keyword: this.keyword,
          t: Date.now()
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>

.header-search .el-input {
  width: 150%;
}

.button-exit {
  font-size: 1em;
  color: #2deed8;
}

.button-news {
  font-size: 1em;
  color: #00f4ff;
}

.button-home {
  font-size: 20px;
  color: #000000;
}

.home-container {
  height: 100%;
}

.el-header {
  background-color: rgb(119, 141, 166);
}

.el-header {
  height: 120px !important;
  padding: 10px 100px 5px 110px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-menu {
  .el-menu-item {
    width: 200px;
    font-size: 15px;
    text-align: center;
  }
}

.topMenu {
  width: 500px;
  background-color: rgb(119, 141, 166) !important;
  .el-menu-item {
    color: black;
    width: 80px;
    font-size: 15px;
    text-align: center;
  }
}

.menu {
  display: flex;
  justify-content: space-between;
}

.el-main {
  overflow-y: scroll;
}

.main {
  padding: 20px 5px;
}

.box {
  width: 1200px;
  margin-left: 50px;
}

.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
